<template>
    <div>
        <div class="article-container">
            <div class="daohang"><a @click="navigateToRoute('/notice-list')">公告列表</a><span>&nbsp; >&nbsp; </span>通知公告</div>
          <hr>
            <div class="notice">
                <p class=" text-center ft-blue ft30">{{notice.noticeTitle}}</p>
                <p class="ft-grey9 text-center">{{notice.releaseDate}}</p>
                <div class="col-md-12 ft16 mar-t30" v-html="notice.noticeContent">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
export default {
    data() {
        return {
            notice:{}
        };
    },
    computed: {
    },
    methods: {
        searchDetail(noticeId){
            axios.get("/repaircenter/repairNotice/detail",{params:{
                noticeId:noticeId
            }})
                .then((resp) => {
                    console.log(resp.data);
                    this.notice=resp.data.data
                })
                .catch(error => {
                    console.error('查询公告失败:', error);
                });
        }
    },
    setup() {
        const router = useRouter();
        const navigateToRoute = (url) => {
            router.push(url); // 替换为你想跳转的路由路径
        };
        
        return {
            navigateToRoute,
        };
    },
    mounted() {
        const noticeId = this.$route.query.noticeId;
        console.log('Notice ID:', noticeId);
    },
    created() {
        const noticeId = this.$route.query.noticeId;
        this.searchDetail(noticeId);
    }
};
</script>

<style scoped>
.article-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 110px;
}

.daohang{
    width: 83%;
    text-align: left;
    border-bottom: 1px solid #00000017;
    background: url(../assets/img/icon-location-blue.png) no-repeat 0 8px;
    background-position: 0px,-12px; /* 调整位置 */
    padding-left: 20px;
}
.daohang > a{
    color: #0000004d;
}
.daohang > span{
    color: #0000004d;
}
button{
    margin-left: 73%; 
    margin-bottom: 15px;
}
</style>